<template>
  <div class="finished-page">

    <div style="display: flex; justify-content: center;">
      <el-row type="flex" id="release-btn" style="width: 66%; margin-top: 15px">
        <img src="../../../../assets/image/history-red.png" alt="" style="width: 150px">
      </el-row>
    </div>

    <div class="list-box">
      <task-info-list
          :loading="loading"
          :data="taskList"
          :data-items="['taskname', 'type', 'deviceRequirement', 'reportPrice']">
        <template slot="option" scope="{task}">
          <el-button type="goon" @click="gotoDetail(task)">任务详情</el-button>
        </template>
      </task-info-list>
    </div>

  </div>
</template>

<script>
import {getFinishedTasksByBossID} from "@/api/boss";
import TaskInfoList from "@/components/new/info-list/TaskInfoList";
import {transformTaskType} from "@/utils/TaskType";

export default {
  name: "Finished",
  components: {TaskInfoList},
  created() {
    this.getTaskList();
  },

  data() {
    return {
      taskList: [],
      loading: true
    }
  },

  methods: {
    async getTaskList() {
      const res = await getFinishedTasksByBossID(sessionStorage.getItem('userid'));
      if (res.code === 500) {
        this.loading = false;
        return this.$message.error('获取任务列表失败');
      }
      if (res.code === 404) {
        this.loading = false;
        return this.$message.info('不存在执行完毕的任务')
      }

      this.taskList = transformTaskType(res.data);
      this.loading = false;
    },

    gotoDetail(task) {
      if(task.type === '协作任务'){
        this.$router.push(`/boss/mytasks/collaborationTaskDetail/${task.id}`);
      }else{
        this.$router.push(`/boss/mytasks/detail/${task.id}?isHistory=false`);
      }

    },
  }

}
</script>

<style scoped>

.list-box {
  border: 1px solid #DCDFE6;
  box-shadow: 0 0 8px #909399;

  margin: 0 auto;
  width: 60%;
  padding: 3% 3%;

  background-color: #ffffff;
}


</style>
